<template>
  <div class="page_box1">
       <h1>promise 非阻塞队列</h1>
    <el-button @click="addTask">单个新增</el-button>
    <el-button @click="addTaskList">批量新增</el-button>
    <el-button @click="run">执行</el-button>
    <div>当前队列: {{ tasks }}</div>
  </div>
</template>

<script>
import { eventBus } from "@/utils/eventBus";

export default {
  data() {
    return {};
  },
  methods: {
    // 方式一：单个调用
    addTask() {
      this.$store.dispatch("queue/addTask", {
        task: () => this.func(2), // 当前任务函数
        taskId: this.generateUUID(), // 当前任务id 方便定位问题
        errorReRun: true, // 失败后是否再次执行 同一个id 失败 只会执行一次
      });
    },
    // 方式二： 数组
    addTaskList() {
      const taskList = [
        {
          task: () => this.func(1, false),
          taskId: this.generateUUID(),
          errorReRun: false, // 失败后是否再次执行 同一个id 失败 只会执行一次，日志只会更新最新的返回结果
        },
        {
          task: () => this.func(2, false),
          taskId: this.generateUUID(),
          errorReRun: true, // 失败后是否再次执行 同一个id 失败 只会执行一次  ，日志只会更新最新的返回结果
        },
        {
          task: () => this.func(3),
          taskId: this.generateUUID(),
          errorReRun: false, // 失败后是否再次执行 同一个id 失败 只会执行一次 ，日志只会更新最新的返回结果
        },
      ];
      this.$store.dispatch("queue/addTask", taskList);
    },
    func(time, resulet = true) {
      return new Promise((resolve, reject) => {
        // console.log(`time:${time} 执行了`);
        if (resulet) {
          setTimeout(() => {
            // console.log(`time:${time} 执行成功`);
            resolve(`time:${time} 执行成功`);
          }, time * 1000);
        } else {
          //   console.log(`time:${time} 执行失败`);
          reject(`time error:${time} 执行失败`);
        }
      });
    },
    run() {
      this.$store.dispatch("queue/run");
    },
    // 获取 uuid
    generateUUID() {
      let d = new Date().getTime();
      let uuid = "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          let r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
        }
      );
      return uuid;
    },
  },
  mounted() {
    eventBus.$on("GlobalTaskQueue", (data) => {
      console.log("eventBus 接收到的数据 GlobalTaskQueue", data);
    });
  },
  computed: {
    tasks() {
      // console.log("this.$store", this.$store);
      // this.$store.getters.
      return this.$store.state.queue.taskQueue;
    },
  },
};
</script>

<style lang="scss" scoped>
.page_box1 {
  width: 100%;
  height: 500px;
  display: block;
}
</style>
